<template>
  <div class="box">
    <div class="tips" v-if="length > 0">最多{{length}}个附件，每个不超过3M</div>
    <div class="tips" v-else>已提交5个附件，无法继续提交</div>
    <div class="list">
      <div class="img" v-for="(item, index) of show" v-bind:key="index" v-bind:class="{active: show[index]}" @click="showImg(index)" v-bind:style="{backgroundImage: 'url(' + img[index] + ')'}">
        <div v-show="img[index] === undefined || img[index] === ''" class="img-border"></div>
        <input :ref="'input' + index" v-show="show[index]" type="file" name="files" @change="uploadHandle(index)" accept="image/png,image/gif,image/jpg,image/jpeg" class="input_file"/>
        <!-- <img v-show="img[index] !== undefined && img[index] !== ''" :src="img[index]" /> -->
        <span v-show="img[index] !== undefined && img[index] !== ''" @click.stop="deleteHandle(index)">×</span>
      </div>
    </div>
    <div class="button" v-bind:class="{active: canSubmit}">
      <button @click="uploadSubmit()">确定上传</button>
    </div>
    <div class="mask-box" v-show="maskShow">
      <div class="mask">
        <img src="../../assets/mobile/right.png"/>
        <p>上传完成</p>
      </div>
    </div>
    <div class="view-box" v-show="viewShow" @click="viewShow = false">
      <img :src="viewImg" @click="viewShow = false"/>
    </div>
  </div>
</template>
<style scoped>
* {
  -webkit-tap-highlight-color: transparent;
}
.box {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
}
.view-box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  line-height: 100vh;
  z-index: 10;
  overflow: auto;
  background: rgba(0, 0, 0, 1);
}
.view-box img {
  width: 100%;
  vertical-align: middle;
}
.mask-box {
  position: fixed;
  top: 200px;
  left: 0;
  width: 100%;
}
.mask {
  width: 150px;
  margin: 0px auto;
  background: rgba(0, 0, 0, .6);
  text-align: center;
  border-radius: 5px;
  padding: 20px 0;
}
.mask img {
  width: 24px;
  margin-bottom: 5px;
}
.mask p {
  color: #fff;
  margin: 0px;
}
.tips {
  padding: 28px 15px;
  color: #606266;
  font-size: 14px;
}
.list {
  font-size: 0px;
}
.img {
  border-radius: 5px;
  width: 100px;
  height: 100px;
  display: inline-block;
  margin: 0 calc((100% - 300px) / 6) 10px;
  background-size: cover;
  background-repeat: no-repeat;
  vertical-align: top;
  position: relative;
}
.img-border {
  width: 100px;
  height: 100px;
  background-image: url('../../assets/mobile/photo-none.png');
  background-size: 100%;
  background-repeat: no-repeat;
}
.img span {
  position: absolute;
  top: 5px;
  right: 5px;
  display: block;
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  background-color: #fff;
  color: #9a9a9a;
  z-index: 10;
  font-size: 16px;
  border-radius: 50%;
}
.img.active .img-border {
  background-image: url('../../assets/mobile/photo.png');
}
.img img{
  width: 100px;
  height: 100px;
  border: 0;
  border-radius: 5px;
  font-size: 10px;
}
.input_file {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.button {
  position: absolute;
  bottom: 50px;
  width: 100%;
  text-align: center;
}
.button button {
  background-color: #dcdfe6;
  color: #fff;
  font-size: 14px;
  border: none;
  width: 90%;
  height: 40px;
  border-radius: 5px;
}
.button.active button {
  background-color: #409eff;
}
</style>

<script>
import EXIF from 'exif-js'
import {uploadMobileImg, getMobileImg} from '@/api/task'
export default {
  created () {
    getMobileImg({sign: this.sign, id: this.id}).then((response) => {
      var num = response.data.files_name.length // 查看已传几张图片
      if (num > 0 && num < 5) {
        this.length = this.length - num
        this.show.splice(-num)
      } else if (num === 0) {

      } else {
        this.length = 0
        this.show = []
      }
    })
  },
  data () {
    return {
      maskShow: false,
      viewShow: false,
      viewImg: '',
      show: [true, false, false, false, false],
      img: [],
      sign: this.$route.query.sign,
      id: this.$route.query.id,
      canSubmit: false,
      length: 5 // 一共多少个元素，默认是5个
    }
  },
  methods: {
    showImg (index) {
      if (this.img[index] !== undefined && this.img[index] !== '') {
        this.viewShow = true
        this.viewImg = this.img[index]
      }
    },
    uploadSubmit () { // 上传提交
      if (this.canSubmit) {
        this.canSubmit = false
        uploadMobileImg({file: this.img, sign: this.sign, id: this.id}).then((response) => {
          this.maskShow = true
          setTimeout(() => {
            this.maskShow = false
            window.opener = null
            window.location.reload()
          }, 2000)
        }).catch(() => {
          if (this.show[0] === false) {
            this.canSubmit = true
          }
        })
      }
    },
    uploadHandle (id) {
      var file = this.$refs['input' + id][0].files[0]
      var reader = new FileReader()
      var obj = this
      reader.onload = (event) => {
        EXIF.getData(file, function () {
          // 获取旋转度
          var or = EXIF.getTag(this, 'Orientation')
          // 绘制画布
          var canvas = document.createElement('canvas')
          var ctx = canvas.getContext('2d')
          var image = new Image()
          image.src = event.target.result
          image.onload = function () {
            var cw, ch, w, h
            if (or === 6) {
              cw = image.height
              ch = image.width
              w = image.height
              h = image.width
            } else {
              cw = image.width
              ch = image.height
              w = image.width
              h = image.height
            }
            canvas.width = w
            canvas.height = h
            if (cw > 1000 && cw > ch) {
              w = 1000
              h = (1000 * ch) / cw
              canvas.width = w
              canvas.height = h
            }
            if (ch > 1000 && ch > cw) {
              h = 1000
              w = (1000 * cw) / ch
              canvas.width = w
              canvas.height = h
            }
            if (or === 6) {
              ctx.save()
              ctx.translate(w / 2, h / 2)
              ctx.rotate(90 * Math.PI / 180)
              ctx.drawImage(image, 0 - h / 2, 0 - w / 2, h, w)
              ctx.restore()
            } else {
              ctx.drawImage(image, 0, 0, w, h)
            }
            var im = canvas.toDataURL('image/jpeg', 1)
            obj.img.push(im)
          }
        })
      }
      reader.readAsDataURL(file)
      this.show[id] = false
      if (id + 1 < this.length) {
        this.show[id + 1] = true
      }
      this.canSubmit = true
    },
    deleteHandle (id) {
      // 清除input值
      var file = this.$refs['input' + id][0]
      file.value = ''
      this.img.splice(id, 1)
      for (const k in this.show) {
        if (this.show[k] === true) {
          if (k !== 0) {
            this.show[k] = false
            this.show[k - 1] = true
            break
          }
        }
      }
      if (this.show[0] === true) {
        this.canSubmit = false
      }
    }
  }
}
</script>
